import { defineComponent } from 'vue'
import { CloseCircleOutlined } from '@ant-design/icons-vue'

export default defineComponent({
  setup() {
    const imgUlr = 'https://img1.baidu.com/it/u=817244212,484997826&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=256'
    return () => (
      <>
        <div class="cms-views-container" style="background: rgba(0, 0, 0, 0.6)">
          <div class="w-full px-[35px] absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
            <div class="h-5 text-right mb-4">
              <CloseCircleOutlined class="text-xl text-white" />
            </div>
            <div class="p-2 bg-white rounded">
              <img src={imgUlr} alt="" class="w-full  object-cover rounded" />
            </div>
            <button class="h-[42px] text-sm px-10 mt-5 bg-[#ff613f] rounded border-0 text-white">下一个</button>
          </div>
        </div>
      </>
    )
  }
})
